import VueDraggable from "vuedraggable";
import EleToolItem from "../../ele-tool-item";
import { getCheckedColumns, getSettingCols } from "../util";
var render = function() {
  var _vm = this;
  var _h = _vm.$createElement;
  var _c = _vm._self._c || _h;
  return _c("ele-tool-item", { attrs: { "title": _vm.tipTitle, "placement": _vm.tipPlacement } }, [_c("el-popover", { attrs: { "placement": "bottom-end", "transition": "el-zoom-in-top", "popper-class": "ele-tool-column" } }, [_c("i", { staticClass: "el-icon-setting", attrs: { "slot": "reference" }, slot: "reference" }), _c("div", { staticClass: "ele-tool-column-item ele-tool-column-header" }, [_vm.sortable ? _c("div", { staticStyle: { "width": "20px" } }) : _c("div", { staticStyle: { "width": "10px" } }), _c("el-checkbox", { attrs: { "indeterminate": _vm.isIndeterminate }, on: { "change": _vm.onColumnCheckAllChange }, model: { value: _vm.isAllChecked, callback: function($$v) {
    _vm.isAllChecked = $$v;
  }, expression: "isAllChecked" } }, [_vm._v(" " + _vm._s(_vm.title) + " ")]), _c("el-link", { attrs: { "type": "primary", "underline": false }, on: { "click": _vm.resetColumnChecked } }, [_vm._v(" " + _vm._s(_vm.resetText) + " ")])], 1), _c("el-divider"), _c("el-checkbox-group", { on: { "change": _vm.onColumnCheckedChange }, model: { value: _vm.checkedIds, callback: function($$v) {
    _vm.checkedIds = $$v;
  }, expression: "checkedIds" } }, [_c("vue-draggable", { attrs: { "animation": "300", "handle": ".ele-tool-column-handle" }, on: { "change": _vm.onColumnSortChange }, model: { value: _vm.colList, callback: function($$v) {
    _vm.colList = $$v;
  }, expression: "colList" } }, _vm._l(_vm.colList, function(element) {
    return _c("div", { key: element.id, staticClass: "ele-tool-column-item" }, [_vm.sortable ? _c("div", { staticClass: "ele-tool-column-handle" }, [_c("i", { staticClass: "el-icon-_more" }), _c("i", { staticClass: "el-icon-_more" })]) : _c("div", { staticStyle: { "width": "10px" } }), _c("el-checkbox", { attrs: { "label": element.id } }, [_vm._v(" " + _vm._s(element.label) + " ")])], 1);
  }), 0)], 1)], 1)], 1);
};
var staticRenderFns = [];
function normalizeComponent(scriptExports, render2, staticRenderFns2, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
  var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
  if (render2) {
    options.render = render2;
    options.staticRenderFns = staticRenderFns2;
    options._compiled = true;
  }
  if (functionalTemplate) {
    options.functional = true;
  }
  if (scopeId) {
    options._scopeId = "data-v-" + scopeId;
  }
  var hook;
  if (moduleIdentifier) {
    hook = function(context) {
      context = context || this.$vnode && this.$vnode.ssrContext || this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext;
      if (!context && typeof __VUE_SSR_CONTEXT__ !== "undefined") {
        context = __VUE_SSR_CONTEXT__;
      }
      if (injectStyles) {
        injectStyles.call(this, context);
      }
      if (context && context._registeredComponents) {
        context._registeredComponents.add(moduleIdentifier);
      }
    };
    options._ssrRegister = hook;
  } else if (injectStyles) {
    hook = shadowMode ? function() {
      injectStyles.call(this, (options.functional ? this.parent : this).$root.$options.shadowRoot);
    } : injectStyles;
  }
  if (hook) {
    if (options.functional) {
      options._injectStyles = hook;
      var originalRender = options.render;
      options.render = function renderWithStyleInjection(h, context) {
        hook.call(context);
        return originalRender(h, context);
      };
    } else {
      var existing = options.beforeCreate;
      options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
    }
  }
  return {
    exports: scriptExports,
    options
  };
}
const __vue2_script = {
  name: "EleToolColumns",
  components: { VueDraggable, EleToolItem },
  props: {
    tipTitle: {
      type: String,
      default: "\u5217\u8BBE\u7F6E"
    },
    tipPlacement: String,
    title: {
      type: String,
      default: "\u5217\u5C55\u793A"
    },
    resetText: {
      type: String,
      default: "\u91CD\u7F6E"
    },
    untitledText: {
      type: String,
      default: "\u672A\u547D\u540D"
    },
    columns: {
      type: Array,
      required: true
    },
    sortable: {
      type: Boolean,
      default: true
    }
  },
  emits: ["update:columns"],
  data() {
    return {
      colList: [],
      checkedIds: [],
      isAllChecked: false,
      isIndeterminate: false
    };
  },
  methods: {
    onColumnCheckedChange() {
      this.isAllChecked = this.colList.length > 0 && this.colList.length === this.checkedIds.length;
      this.isIndeterminate = this.colList.length !== this.checkedIds.length;
      const columns = getCheckedColumns(this.columns, this.colList, this.checkedIds, this.sortable);
      this.$emit("update:columns", columns);
    },
    onColumnCheckAllChange() {
      if (this.isAllChecked) {
        this.checkedIds = this.colList.map((d) => d.id);
      } else {
        this.checkedIds = [];
      }
      this.isIndeterminate = false;
      const columns = getCheckedColumns(this.columns, this.colList, this.checkedIds, this.sortable);
      this.$emit("update:columns", columns);
    },
    resetColumnChecked() {
      const result = getSettingCols(this.columns, this.untitledText);
      this.colList = result.data;
      this.checkedIds = result.checkedIds;
      this.isAllChecked = result.isAllChecked;
      this.isIndeterminate = result.isIndeterminate;
      const columns = getCheckedColumns(this.columns, result.data, result.checkedIds, this.sortable);
      this.$emit("update:columns", columns);
    },
    onColumnSortChange() {
      const columns = getCheckedColumns(this.columns, this.colList, this.checkedIds, this.sortable);
      this.$emit("update:columns", columns);
    }
  },
  watch: {
    columns: {
      handler(value) {
        if (value) {
          const result = getSettingCols(value, this.untitledText);
          this.colList = result.data;
          this.checkedIds = result.checkedIds;
          this.isAllChecked = result.isAllChecked;
          this.isIndeterminate = result.isIndeterminate;
        }
      },
      immediate: true,
      deep: true
    }
  }
};
const __cssModules = {};
var __component__ = /* @__PURE__ */ normalizeComponent(__vue2_script, render, staticRenderFns, false, __vue2_injectStyles, null, null, null);
function __vue2_injectStyles(context) {
  for (let o in __cssModules) {
    this[o] = __cssModules[o];
  }
}
var toolColumns = /* @__PURE__ */ function() {
  return __component__.exports;
}();
export { toolColumns as default };
